<template>
  <el-dialog width="600px" title="分配权限" :visible.sync="dialogVisible" @close="handleClose">
    <div>
      <el-button type="primary" @click="setCheckedKeys">全选</el-button>
      <el-button @click="resetChecked">取消全选</el-button>
      <el-button icon="el-icon-d-caret" plain type="primary" @click="expandClick">{{ expandTableTree?'收起':'展开' }}
      </el-button>
    </div>
    <div v-loading="treeLoading" style="overflow-y: auto;height: 600px;padding-top: 20px">
<!--      <div v-for="(item,index) in menuData" :key="index" style="display: inline">
        {{item.menuName}}
        <div v-if="item.children&&item.children.length>0" style="display: inline">
          <el-checkbox-group v-model="submitForm.menuIds">
            <el-checkbox v-for="(i,idx) in item.children" :key="idx" :label="i.menuName" />
          </el-checkbox-group>
        </div>
      </div>-->
      <el-tree
        v-if="refreshTable"
        ref="menuTree"
        :default-checked-keys="submitForm.menuIds"
        :props="props"
        :data="menuData"
        node-key="id"
        show-checkbox
        :default-expand-all="expandTableTree"
      >
        <span slot-scope="scope" class="custom-tree-node">
          <div v-if="scope.node.icon">
            <div v-if="scope.node.icon.startsWith('el-icon')">
              <i :class="scope.node.icon" class="icon" />
              <span>{{ scope.node.label }}</span>
            </div>
            <div v-else>
              <svg-icon :icon-class="scope.node.icon" class="icon" />
              <span>{{ scope.node.label }}</span>
            </div>
          </div>
          <div v-else>
            <span>{{ scope.node.label }}</span>
          </div>
        </span>
      </el-tree>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button :loading="treeLoading" type="text" @click="handleClose">取消</el-button>
      <el-button :loading="treeLoading" type="primary"  @click="handleSubmitRoleMenu">提交</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { updateRolePermission, selectMenuIds } from '@/api/system/role'
import { selectMenuTree } from '@/api/system/menu'
/**
 * @author yizuomin
 * @date 2023/5/7 19:05
 **/
export default {
  name: 'SubmitModule',
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogVisible: this.visible,
      props: {
        label: 'menuName',
        children: 'children',
        icon: 'icon'
      },
      menuData: [],
      treeLoading: false,
      rolePermissionDialogVisible: false,
      expandTableTree: false,
      refreshTable: true,
      submitForm: {
        id: '',
        menuIds: []
      }
    }
  },
  methods: {
    init(id) {
      this.submitForm.id = id
      selectMenuTree({}).then(resp => {
        if (resp.success) {
          this.menuData = resp.data
        }
        selectMenuIds(id).then(resp => {
          if (resp.success) {
            this.submitForm.menuIds = resp.data
          }
        }).finally(() => {
          this.treeLoading = false
        })
      })
    },
    handleSubmitRoleMenu() {
      this.submitForm.menuIds = this.$refs.menuTree.getCheckedKeys()
      this.treeLoading = true
      updateRolePermission(this.submitForm).then(resp => {
        if (resp.success) {
          this.$message.success('操作成功')
          this.submitForm.id = ''
          this.submitForm.menuIds = []
          this.handleClose()
        }
      }).finally(() => {
        this.treeLoading = false
      })
    },
    setCheckedKeys() {
      this.$refs.menuTree.setCheckedKeys(this.menuData.map(e => e.id))
    },
    resetChecked() {
      this.$refs.menuTree.setCheckedKeys([])
    },
    handleClose() {
      this.$emit('close')
    },
    expandClick() {
      this.refreshTable = false
      this.expandTableTree = !this.expandTableTree
      this.$nextTick(() => {
        this.refreshTable = true
      })
    }
  }
}
</script>

<style scoped>

</style>
